<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>test - jQuery</title>
        <script src="vendor/jquery-1.9.1.js" type="text/javascript"></script>
        <style type="text/css">
            div.first-div {
                border: thin #ccc solid;
                padding: 5px;
                margin: 5px;
                float: left;
                height:300px;
                width:600px;
            }
            .content {
                width: 220px;
                font-family: "Microsoft Yahei";
                font-weight: bold;
                float: left;
                margin:0px 10px;
            }
            .content > ul {
                list-style: none;
                padding:0px;
                margin:5px;
            }
            .content .menu-one>li {
                width: 220px;
                overflow: hidden;
                border-top: 1px solid #888;
            }
            .content .menu-one .header {
                height: 35px;
                background: #666;
                line-height: 34px;
                text-indent: 10px;
                cursor: pointer;
                color: #fff;
            }
            .content .menu-one .header:hover{
                background-color: #777;
            }
            .content .menu-show .header:hover {
                background-color: #666;
            }
            .content .menu-two {
                list-style:none;
                display: none;
                height: auto;
                padding: 0px;
            }
            .content .menu-two li {
                height: 35px;
                background: #eaeaea;
                border-top: 1px solid #ccc;
                line-height: 34px;
                text-indent: 20px;
            }
            .content .menu-two li:hover {
                background: #ccc;
            }
        </style>
        <script>
            $(function() {
                var aMenuOneLi = $(".menu-one > li");
                var aMenuTwo = $(".menu-two");
                $(".menu-one > li >.header").each(function(i) {
                    $(this).click(function() {
                        if ($(aMenuTwo[i]).css("display") == "block") {
                            $(aMenuTwo[i]).slideUp(300);
                            $(aMenuOneLi[i]).removeClass("menu-show");
                        } else {
                            $(aMenuTwo[i]).slideDown(300);
                            $(aMenuOneLi[i]).addClass("menu-show");
                        }
                    });
                });
            });
        </script>
    </head>
    <body>
        <h2 align="center">BaseDemo Page</h2>
        <br />
        <div class="content">
            <ul class="menu-one">
                <li>
                    <div class="header">header1</div>
                    <ul class="menu-two">
                        <li class="firstChild"> 1-1  </li>
                        <li> 1-2 </li>
                        <li>  1-3  </li>
                    </ul>
                </li>
                <li >
                    <div class="header">header2</div>
                    <ul class="menu-two">
                        <li class="firstChild"> 2-1 </li>
                        <li>  2-2  </li>
                        <li>  2-3 </li>
                    </ul>
                </li>
            </ul>
        </div>
        <div id="div1" class="first-div">
            ID为div1,class为first-div
        </div>
    </body>
</html>
